<html>
<head>
	<title>Keys list</title>
	<meta name="decorator" content="default"/>
	
 %include site_media.html media_prefix=media_prefix
	
<link href="/{{media_prefix}}/jquery-ztree/3.5.12/css/zTreeStyle/zTreeStyle.min.css" rel="stylesheet" type="text/css"/>
<script src="/{{media_prefix}}/jquery-ztree/3.5.12/js/jquery.ztree.core-3.5.min.js" type="text/javascript"></script>
<script src="/{{media_prefix}}/jquery-ztree/3.5.12/js/jquery.ztree.exedit-3.5.min.js" type="text/javascript"></script>
	<style type="text/css">
		.ztree {margin-top:5px;overflow:hidden;}
		.ztree li span.button.level0, .ztree li a.level0 {display:none;height:0;}
		.ztree li ul.level0 {padding:0;background:none;}
	</style>
	<script type="text/javascript">
		var tree = null;
		var key, lastValue = "", nodeList = [];
		function do_Expand(){
			if (tree){
				tree.expandAll(true);
			}
		}
		function do_Collapse(){
			if (tree){
				var nodes = tree.getNodesByParam("level", 1);
				for(var i=0; i<nodes.length; i++) {
					tree.expandNode(nodes[i], false, true, false);
				}
			}
		}
		function do_Delete(){
			parent.document.getElementById("cmsMainFrame").src = "/delete?s="+{{cur_server_index}}+"&db="+{{cur_db_index}}+"&key=&cursor="+ '{{pre_scan_cursor}}';
			window.location.reload();
		}
		function do_Search(){
			var value = $.trim(key.get(0).value);
			urlpara = "?s="+{{cur_server_index}}+"&db="+{{cur_db_index}}+"&k="+ value+"&cursor="+ '{{pre_scan_cursor}}';
			window.location.href = urlpara;
		}
		
		function do_Scan(){
			var value = $.trim($('#cursor').get(0).value);
			urlpara = "?s="+{{cur_server_index}}+"&db="+{{cur_db_index}}+"&k="+ '{{cur_search_key}}'+"&cursor="+ value;
			window.location.href = urlpara;
		}
		
		function to_key(){
			var value = $.trim($('#tokey').get(0).value);
			parent.document.getElementById("cmsMainFrame").src="/view?s="+{{cur_server_index}}+"&db="+{{cur_db_index}}+"&key="+value;
		}
		
		function onClick(event, treeId, treeNode, clickFlag) {
			if (!treeNode.isParent){
				parent.document.getElementById("cmsMainFrame").src="/view?s="+{{cur_server_index}}+"&db="+{{cur_db_index}}+"&key="+treeNode.id;
			}
		}
		
		function zTreeOnRemove(event, treeId, treeNode) {
			parent.document.getElementById("cmsMainFrame").src = "/delete?s="+{{cur_server_index}}+"&db="+{{cur_db_index}}+"&key="+treeNode.id+"&cursor="+ '{{pre_scan_cursor}}';
		}

	
		$(document).ready(function(){
		var setting = {
				view:{
					selectedMulti:false,
					nameIsHTML: true,
					fontCss:function(treeId, treeNode) {
						return (!!treeNode.highlight) ? {"font-weight":"bold"} : {"font-weight":"normal"};
					}
				},
				edit: {
					enable: true,
					showRenameBtn: false
				},
				data: {
					key: {
						title:"count"
					},
					simpleData: {
						enable: true
					}
				},
				callback: {
					onClick: onClick,
					onRemove: zTreeOnRemove
				}
			};
			var zNodes= {{!all_trees}};
			tree = $.fn.zTree.init($("#tree"), setting, zNodes);
			
			key = $("#key");
//			key.bind("cut input", searchNode);
//			// 展开第一级节点
//			var nodes = tree.getNodesByParam("level", 0);
//			for(var i=0; i<nodes.length; i++) {
//				tree.expandNode(nodes[i], true, true, false);
//			}
//			// 展开第二级节点
//			nodes = tree.getNodesByParam("level", 1);
//			for(var i=0; i<nodes.length; i++) {
//				tree.expandNode(nodes[i], true, true, false);
//			};
            $("#key").keydown(function(event){
                  if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {
                    $("#key_btnSubmit").click();
                  }
            });
            $("#tokey").keydown(function(event){
                  if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {
                    $("#tokey_btnSubmit").click();
                  }
            });
            $("#cursor").keydown(function(event){
                  if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {
                    $("#cursor_btnSubmit").click();
                  }
            });
		});
		
		function searchNode(e) {
			// 取得输入的关键字的值
			var value = $.trim(key.get(0).value);
			// 如果和上次一次，就退出不查了。
			if (lastValue === value) {
				return;
			}
			// 保存最后一次
			lastValue = value;
			// 如果要查空字串，就退出不查了。
			if (value === "") {
				return;
			}
			updateNodes(false);
			nodeList = tree.getNodesByParamFuzzy("name", value);
			updateNodes(true);
		}
		function updateNodes(highlight) {
			for(var i=0, l=nodeList.length; i<l; i++) {
				nodeList[i].highlight = highlight;				
				tree.updateNode(nodeList[i]);
				if (highlight) {
					tree.expandNode(nodeList[i].getParentNode(), true, false, true);
				}
			}
			$("#key").focus();
		}
	</script>
</head>
<body>
	<div class="accordion-group" style="padding-left:10px;">
	    <div class="accordion-heading navbar-fixed-top" style="height: 95px; background-color: white; border: 1px solid #e5e5e5">
	         <div id="search" class="control-group">
				<span><input type="text" class="empty" id="key" name="key" value="{{cur_search_key}}" title="输入您要搜索的key片段来进行全局模糊匹配" maxlength="50" style="width:100px;margin-top: 10px;height: 30px" placeholder="Search"></span>
				<a id="key_btnSubmit" class="btn" onclick="do_Search();"><i class="icon-search"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				
				<span><input type="text" class="empty" id="cursor" name="cursor" value="{{cur_scan_cursor}}" title="{{ trans('Current cursor positon, you can set a value to scan') }}" maxlength="50" style="width:80px;margin-top: 10px;height: 30px"></span>
				<a id="cursor_btnSubmit" class="btn" onclick="do_Scan();" title="{{ trans('To see next batch of keys') }}"><i class="icon-play"></i>{{ trans('Scan') }}</a><br/>
				
				<span><input type="text" class="empty" id="tokey" name="tokey" title="输入您要直接去查看的key的完整名" maxlength="50" style="width:100px;margin-top: 10px;height: 30px" placeholder="Exact  key"></span>
				<input id="tokey_btnSubmit" class="btn" type="submit" value="Go" title="{{ trans('To see a exact  key directly') }}" onclick="to_key();">&nbsp;&nbsp;
				
				<a  href="javascript:;" onclick="do_Expand();" title="{{ trans('Expand all') }}"><i class="icon-folder-open"></i> {{ trans('Expand') }}</a> /
				<a  href="javascript:;" onclick="do_Collapse();" title="{{ trans('Collapse all') }}"><i class="icon-folder-close"></i>{{ trans('Collapse') }}</a>
				&nbsp;<a  href="javascript:;" onclick="do_Delete();" title="{{ trans('delete all') }}"><i class="icon-remove-sign"></i></a>  ({{count}} keys)
	    	</div>
	    </div>
	    <div class="accordion-body" style="margin-top: 95px">
				<div id="tree" class="ztree"></div>{{ error_msg }}
	    </div>
	</div>
</body>
</html>